<template>
    <div>
        <div class="item">
            <span>
                <el-checkbox v-model="isCheck" size="large" />
                {{  item.title}}</span>
            <el-button type="danger" link @click="delItem">删除</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref,computed } from 'vue'

export default defineComponent({
    props:['item','delInfo','index','changeFlag'],
    setup (props) {
        let checked = ref('')
        console.log(checked);
        const delItem = ()=>{
            props.delInfo(props.index);
        }
        const isCheck = computed({
            get(){
                return props.item.flag
            },
            set(value){
                console.log(value);
                props.changeFlag(props.item,value);
            }
        })
        return {
            checked,
            delItem,
            isCheck
        }
    }
})
</script>

<style scoped>
.item{
    display:flex;
    justify-content: space-between;
    padding: 10px;
}
</style>